<template>
  <!-- 字符串 -->
  <p>
    {{ str }}
    <!-- 页面展示：字符串 -->
    {{ num + "aaa" }}
    <!-- 页面展示：1aaa -->
    {{ str.length }}
    <!-- 页面展示：3 -->
    {{ str.split("ll").reverse().join("ad") }}
  </p>
  <!-- 数值 -->
  <p>
    {{ num }}
    <!-- 页面展示：1 -->
    {{ num + num1 }}
    <!-- 页面展示：101 -->
    {{ num > num1 }}
    <!-- 页面展示：false -->
    {{ num.toFixed(2) }}
    <!-- 页面展示：1.00 -->
  </p>
  <!-- boolean -->
  <p>{{ flag }}</p>
  <!-- 页面展示：true -->
  <p>
    {{ arr }}
    {{ arr[3] }}
  </p>
  <!-- 对象 -->
  <p>
    {{ obj }}
    <!-- 页面展示：{ "name": "虫虫", "age": 20 } -->
    {{ obj.name }}
    <!-- 页面展示：虫虫 -->
    <!-- 三目运算符 -->
  </p>

  <p>{{ num > num1 ? "是" : "否" }}</p>
  <!-- 页面展示：否 -->
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const state = reactive({
      str: 'Hello',
      num: 1,
      num1: 100,
      flag: true,
      arr: [1, 2, 3, 4],
      obj: {
        name: '虫虫',
        age: 20
      }
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>
